<template>
  <el-dialog v-model="addOrEditVisible" title="字典项" :before-close="closeEditDialog" width="50%">
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="160px" class="demo-ruleForm"
      :size="formSize" status-icon>
      <el-row>
        <el-col :span="24">
          <el-form-item label="字典类型" prop="dicCode">
            <el-input v-model="ruleForm.dicCode" :disabled="itemTypeNoUpdate==true? true: false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="字典项名称" prop="itemName">
            <el-input v-model="ruleForm.itemName" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="字典值" prop="itemVal">
            <el-input v-model="ruleForm.itemVal" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-form-item label="排序" prop="itemSort">
            <el-input-number v-model="ruleForm.itemSort" />
          </el-form-item>
        </el-col>
      </el-row>
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="创建人" prop="createUser">
            <el-input v-model="ruleForm.createUser" />
          </el-form-item>
        </el-col>
      </el-row> -->
      <!-- <el-row>
        <el-col :span="24">
          <el-form-item label="创建时间" prop="createTime">
            <el-input v-model="ruleForm.createTime" />
          </el-form-item>
        </el-col> -->
      <!-- </el-row> -->
      <el-row>
        <el-col :span="24">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="ruleForm.remark" type="textarea"  />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeEditDialog">关闭</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from "element-plus";
import router from "@/router";
import { DicItem } from '@/apis/model/system/DicItemModel';
import { insertDicItem, updateDicItem } from '@/apis/http/system/DicItemHttp';

interface Prop {
  addOrEditVisible: boolean,
  ruleForm: DicItem,
  addDataType: string,
  itemTypeNoUpdate: boolean
}

// 刷新list页面
const refushList = ref(false);

// 传递过来的参数
const props = defineProps<Prop>();

const emit = defineEmits(["closeEditDialog"]);

// 关闭按钮
const closeEditDialog = () => {
  emit("closeEditDialog", {
    addOrEditVisible: !props.addOrEditVisible,
    refushList: refushList.value
  })
}
const formSize = ref('default')
const ruleFormRef = ref<FormInstance>()

const rules = reactive<FormRules>({
  // id: [
  //   { required: true, message: '请输入id', trigger: 'blur' }
  // ],
  dicCode: [
    { required: true, message: '请输入字典类型', trigger: 'blur' }
  ],
  itemName: [
    { required: true, message: '请输入字典类型', trigger: 'blur' }
  ],
  itemVal: [
    { required: true, message: '请输入字典值', trigger: 'blur' }
  ],
  itemSort: [
    { required: true, message: '请输入排序', trigger: 'blur' }
  ],
  // createUser: [
  //   { required: true, message: '请输入创建人', trigger: 'blur' }
  // ],
  // createTime: [
  //   { required: true, message: '请输入创建时间', trigger: 'blur' }
  // ],
  // remark: [
  //   { required: true, message: '请输入备注', trigger: 'blur' }
  // ],
})

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      // 新增
      if (props.addDataType === 'add') {
        insertDicItem(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '创建成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('创建失败！')
          }
        })
      } else if (props.addDataType === 'edit') {
        updateDicItem(props.ruleForm).then(res => {
          const code = res.code;
          const message: string = res.message;
          const data = res.data;
          if (code == 200) {
            ElMessage({
              message: '更新成功！',
              type: 'success',
            })
            refushList.value = true
            closeEditDialog()
          } else {
            ElMessage.error('更新失败！')
          }
        })
      }

    } else {
      ElMessage.error('请完善信息！')
    }
  })
}
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
